import React from 'react';
import { Switch } from 'tdesign-react';
import { Icon } from 'tdesign-icons-react';
import styles from './index.module.less';

export interface StatusSwitchProps {
  value: boolean;
  loading?: boolean;
  onChange: (value: boolean, row: any) => void;
  row: any;
  activeText?: string;
  inactiveText?: string;
  activeIcon?: React.ReactNode;
  inactiveIcon?: React.ReactNode;
  showIcon?: boolean;
  size?: 'small' | 'medium' | 'large';
  className?: string;
  style?: React.CSSProperties;
}

const StatusSwitch: React.FC<StatusSwitchProps> = ({
  value,
  loading = false,
  onChange,
  row,
  activeText = '启用',
  inactiveText = '禁用',
  activeIcon = <Icon name="check" />,
  inactiveIcon = <Icon name="close" />,
  showIcon = true,
  size = 'medium',
  className,
  style
}) => {
  const handleChange = (newValue: boolean) => {
    onChange(newValue, row);
  };

  const renderLabels = () => {
    if (!showIcon) return undefined;
    return [activeIcon, inactiveIcon];
  };

  return (
    <div className={`${styles.statusSwitch} ${className || ''}`} style={style}>
      <span className={styles.statusText}>
        {value ? activeText : inactiveText}
      </span>
      <div className={styles.switchWrapper}>
        <Switch
          label={renderLabels()}
          size={size}
          value={value}
          loading={loading}
          onChange={handleChange}
        />
      </div>
    </div>
  );
};

export default StatusSwitch;
export { StatusSwitch };
